<template>
  <div>
    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="row breadcrumb_box align-items-center">
              <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                <h2 class="breadcrumb-title">联系我们</h2>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12">
                <!-- breadcrumb-list start -->
                <ul class="breadcrumb-list text-center text-md-right">
                  <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                  <li class="breadcrumb-item active">联系我们</li>
                </ul>
                <!-- breadcrumb-list end -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- contact area start -->
    <div class="contact-area pb-100px pt-100px">
      <div class="container">
        <div class="contact-map mb-10">
          <div id="mapid" data-aos="fade-up" data-aos-delay="200">
            <div class="mapouter">
              <div class="gmap_canvas"></div>
            </div>
          </div>
        </div>
        <div class="custom-row-2 row">
          <div
            class="col-lg-4 col-md-5 mb-lm-60px col-sm-12 col-xs-12 w-sm-100"
          >
            <div class="contact-info-wrap">
              <h2 class="title" data-aos="fade-up" data-aos-delay="200">
                联系方式
              </h2>
              <div
                class="single-contact-info"
                data-aos="fade-up"
                data-aos-delay="200"
              >
                <div class="contact-info-inner">
                  <span class="sub-title">电话:</span>
                </div>
                <div class="contact-info-dec">
                  <p><a href="tel:+012345678102">+012 345 678 102</a></p>
                  <p><a href="tel:+012345678102">+012 345 678 102</a></p>
                </div>
              </div>
              <div
                class="single-contact-info"
                data-aos="fade-up"
                data-aos-delay="200"
              >
                <div class="contact-info-inner">
                  <span class="sub-title">Email:</span>
                </div>
                <div class="contact-info-dec">
                  <p>
                    <a href="mailto://urname@email.com">urname@email.com</a>
                  </p>
                  <p>
                    <a href="mailto://urwebsitenaem.com">urwebsitenaem.com</a>
                  </p>
                </div>
              </div>
              <div
                class="single-contact-info"
                data-aos="fade-up"
                data-aos-delay="200"
              >
                <div class="contact-info-inner">
                  <span class="sub-title">地址:</span>
                </div>
                <div class="contact-info-dec">
                  <p>地址在这里,</p>
                  <p>南宁职业技术学院</p>
                </div>
              </div>
              <div class="contact-social">
                <h3 class="title" data-aos="fade-up" data-aos-delay="200">
                  Follow Us
                </h3>
                <div
                  class="social-info"
                  data-aos="fade-up"
                  data-aos-delay="200"
                >
                  <ul class="d-flex">
                    <li>
                      <a href="#"><i class="icon-social-facebook"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-social-twitter"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-social-youtube"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-social-google"></i></a>
                    </li>
                    <li>
                      <a class="m-0" href="#"
                        ><i class="icon-social-instagram"></i
                      ></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
            <div class="contact-form">
              <div class="contact-title mb-30">
                <h2 class="title" data-aos="fade-up" data-aos-delay="200">
                  保持联系
                </h2>
              </div>
              <div class="contact-form-style" id="contact-form">
                <div class="row">
                  <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                    <input
                      name="name"
                      placeholder="名称*"
                      type="text"
                      v-model="emailName"
                    />
                  </div>
                  <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                    <input
                      name="email"
                      placeholder="Email*"
                      type="email"
                      v-model="emailNumber"
                    />
                  </div>
                  <div
                    class="col-lg-12"
                    data-aos="fade-up"
                    data-aos-delay="200"
                  >
                    <input
                      name="subject"
                      placeholder="标题*"
                      type="text"
                      v-model="emailTitle"
                    />
                  </div>
                  <div
                    class="col-lg-12"
                    data-aos="fade-up"
                    data-aos-delay="200"
                  >
                    <textarea
                      name="message"
                      placeholder="您的信息*"
                      v-model="emailContent"
                    ></textarea>
                    <button
                      class="btn btn-primary btn-hover-dark mt-4"
                      data-aos="fade-up"
                      data-aos-delay="200"
                      @click="sendEmail"
                    >
                      发送
                    </button>
                  </div>
                </div>
              </div>
              <p class="form-messege"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- contact area end -->
  </div>
</template>

<script>
import API from "@/api/request";
export default {
  name: "BookShopEmail",

  components: {},

  directives: {},

  data() {
    return {
      user: {},
      emailName: "",
      emailNumber: "",
      emailTitle: "",
      emailContent: "",
    };
  },

  mounted() {},
  created() {
    this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
  },
  methods: {
    sendEmail() {
      API.get("/email",{
        params: {
            emailName: this.emailName,
            emailNumber: this.emailNumber,
            emailTitle: this.emailTitle,
            emailContent: this.emailContent,
        },
      }).then((res) => {
        this.$message({
          type: "success",
          message: "发送成功！！",
        });
        this.emailName=""
        this.emailNumber=""
        this.emailTitle=""
        this.emailContent=""
      });
    },
  },
};
</script>

<style  scoped>
</style>